<template>
  <MyBreadcrumb :item1="`支付管理`" :item2="`支付列表`"></MyBreadcrumb>

  <el-card class="box-card">
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column prop="id" label="编号" width="100"/>
          <el-table-column prop="user.username" label="用户名" width="150"/>
          <el-table-column prop="orderNo" label="订单号" width="200"/>
          <el-table-column label="支付平台" width="100">
            <template #default="scope">
              <span v-if="scope.row.payPlatform == 1">支付宝</span>
              <span v-else>微信</span>
            </template>
          </el-table-column>
          <el-table-column prop="platformNumber" label="支付流水号" />
          <el-table-column prop="platformStatus" label="支付状态">
            <template #default="scope">
              <span v-if="scope.row.platformStatus == 'WAIT_BUYER_PAY'">支付中</span>
              <span v-else>支付完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" />
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";

import MyBreadcrumb from "../../components/MyBreadcrumb.vue";

import { getPayInfos } from "../../api/pay.js";

export default {
  name: "Pay"
  ,components : {MyBreadcrumb}
  ,data(){
    return {
      tableData: [
        {
          "id": 53,
          "userId": 25,
          "orderNo": 1492090946105,
          "payPlatform": 1,
          "platformNumber": "2017041321001004300200116250",
          "platformStatus": "WAIT_BUYER_PAY",
          "createTime": "2017-04-13 13:42:33",
          "updateTime": "2017-04-13 13:42:33",
          "user": {
            "id": 25,
            "username": "zhangsan",
            "password": null,
            "email": "110@qq.com",
            "phone": "15380868272",
            "question": "王总喜欢谁?",
            "answer": "我喜欢林志玲",
            "role": 1,
            "createTime": "2023-06-21 08:17:41",
            "updateTime": "2023-06-21 08:17:41"
          }
        }
      ]
    }
  },
  methods: {
    async getPayInfoData(){
      const {data: ret} = await getPayInfos();
      console.log(ret);
      this.tableData = ret['data'];
    }
  },
  setup(){
    const { ctx } = getCurrentInstance();
    onMounted(() => {
      ctx.getPayInfoData();
    })
  }
}
</script>

<style scoped>
  .box-card {
    width: 100%;
    margin-top: 15px;
  }
</style>